<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 400px;
        margin: 0 auto;
    }
    .banner{
        width: 300px;
        background: linear-gradient(to bottom,#F9FBD1,#F8F8F1);
    }
    .banner h3{
        height: 30px;
        line-height: 30px;
        color: #FFFFFF;
        font-family: 楷体;
        text-indent: 10px;
        background: rgb(81,135,0) url("img/bang.gif") no-repeat 110px center;
    }
    li{
        list-style: none;
        line-height: 30px;
        height: 30px;
        text-indent: 20px;
    }
    a{
        color:#85bae4;
        font-size: 14px;
        font-family: 宋体;
    }
    a:link{
        text-decoration: none;
    }
    li:nth-of-type(1){
        background: url("img/book_no01.gif") no-repeat 0px center;
    }
    li:nth-of-type(2){
        background: url("img/book_no02.gif") no-repeat 0px center;
    }
    li:nth-of-type(3){
        background: url("img/book_no03.gif") no-repeat 0px center;
    }
    li:nth-of-type(4){
        background: url("img/book_no04.gif") no-repeat 0px center;
    }
    li:nth-of-type(5){
        background: url("img/book_no05.gif") no-repeat 0px center;
    }
    li:nth-of-type(6){
        background: url("img/book_no06.gif") no-repeat 0px center;
    }
    li:nth-of-type(7){
        background: url("img/book_no07.gif") no-repeat 0px center;
    }
    li:nth-of-type(8){
        background: url("img/book_no08.gif") no-repeat 0px center;
    }
    li:nth-of-type(9){
        background: url("img/book_no09.gif") no-repeat 0px center;
    }
    li:nth-of-type(10){
        background: url("img/book_no10.gif") no-repeat 0px center;
    }

</style>
<body>
<div class="box">
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="new.html">作业三</a>
    <div class="banner">
        <h3>畅销书排行</h3>
        <ul>
             <li><a href="">不抱怨的世界(畅...</a></li>
            <li><a href="">遇见未知的自己...</a> </li>
            <li><a href="">活法（季羡林、...</a> </li>
            <li><a href="">高效能人士的七个习惯</a> </li>
            <li><a href="">被迫强大（北外女生香奈儿...</a> </li>
            <li><a href="">遇见心想事成的自己（《遇...</a> </li>
            <li><a href="">世界上最伟大的推销员（插...</a> </li>
            <li><a href="">我的成功可以复制（唐骏亲...</a> </li>
            <li><a href="">少有人走的路：心智成熟的...</a> </li>
            <li><a href="">活出全新的自己——唤醒...</a>  </li>
        </ul>
    </div>
</div>

</body>
</html>